<section>
    <div class="help-content">
        <h3 class="info-title smaller" data-id="#pages/email">Email Templates</h3>
        <!-- #section:pages/email -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Ace admin template has an <a href="../build/email.html">email converter</a>
                    which takes your HTML code
                    in Bootstrap style and converts it to table layout
                    appropriate for email clients.
                </li>

                <li>
                    For starters, there are a few samples provided that you can use and modify to make your own email
                    templates:
                    <ul>
                        <li><code data-open-file="html" class="open-file"><span
                                class="brief-show">build/demo/demo-</span>confirmation.html</code></li>
                        <li><code data-open-file="html" class="open-file"><span
                                class="brief-show">build/demo/demo-</span>navbar.html</code></li>
                        <li><code data-open-file="html" class="open-file"><span
                                class="brief-show">build/demo/demo-</span>newsletter.html</code></li>
                        <li><code data-open-file="html" class="open-file"><span
                                class="brief-show">build/demo/demo-</span>contrast.html</code></li>
                    </ul>

                    Inside email converter, when you select one of the above demo files, some of the options
                    on left side are also modified.
                </li>

                <li>
                    You should consider the following for better results with converter.
                </li>

                <li>
                    Currently it only works best in Chrome browser as the conversion is done inside the browser
                    and "getMatchedCSSRules" function is used which is only available in webkit browsers.
                </li>

                <li>
                    Use <code>.row</code> and <code>.col-sm-*</code> elements to have multiple columns inside a row
                    which will be stacked on top of each other in small devices.
                    <br/>
                    If you add <code>.sm-border</code> class to <code>.row</code>, there will be a border separating
                    stacked columns on small devices.

                    <br/>

                    You can also use a single <code>.col</code> class for less padding.

                </li>
                <li>
                    <code>.row</code> element can have <code>.padding-*</code> class for different content padding
                    values.
                    <br/>
                    If you use this, the paddings will be fixed and won't be changed on smaller screens:
                    <br/>
<pre data-language="html">
  <div class="row padding-12"></div>
</pre>
                    Use <code>.margin-*</code> class on <code>.row</code> to specify spacing between its columns:
<pre data-language="html">
  <div class="row margin-8"></div>
</pre>
                </li>

                <li>
                    Use <code>.clearfix</code> and <code>.pull-left</code> or <code>.pull-right</code> classes to have a
                    table with multiple rows and columns which won't be stacked on top of each other in small devices.
                </li>

                <li>
                    Use <code>.navbar</code> class for a navbar which has 100% width.
                </li>

                <li>
                    Use <code>.space-*</code>, <code>.break-*</code> and <code>.hr-*</code> classes for spacing or
                    horizontal lines.
                    <br/>
                    For example <code>.break-12</code> adds a <i>12px</i> space with body background color
                    and <code>.space-12</code> adds a <i>12px</i> space with content background color.
                    <br/>
                    For <code>.hr-*</code> you can also add the optional
                    <code>.padding-*</code> to add padding from sides.
                    <br/>
                    If you have nested rows and columns, don't use above classes inside inner rows and columns.
                </li>

                <li>
                    <div class="alert alert-info">
                        For each of the above classes (.row, .clearfix, .navbar, .space-*, .hr-*) you can use inline
                        styles to override background color:
                        <code>&lt;div class="space-12" style="background-color: #FF0000;"&gt;&lt;/div&gt;</code>
                    </div>
                </li>

                <li>
                    Add <code>.pull-left</code>, <code>.pull-right</code> class to <code>img</code> elements
                    to make them automatically float to right or left on small devices.
                </li>

                <li>
                    You can use some classes to style your email. The following classes can be used:
                    <ul>
                        <li>
                            Alerts, such as <code>.alert-info</code>, etc ...
                        </li>
                        <li>
                            Background classes such as <code>.bg-primary</code>, etc ...
                        </li>
                        <li>
                            Wells, such as <code>.well</code>, <code>.well-sm</code>
                        </li>
                        <li>
                            Text colors and styles such as <code>.blue</code> <code>.red</code>
                            <code>.text-info</code>
                            <code>.bigger-110</code>, etc ...
                        </li>
                        <li>
                            Button & label classes such as
                            <code>.btn-info</code>, <code>.btn-sm</code>, <code>.btn-white</code>,
                            <code>.no-border</code>, <code>.label-success</code>, etc ...
                        </li>
                        <li>
                            Alignment classes such as <code>.text-right</code>, <code>.align-middle</code>, etc ...
                        </li>
                        <li>
                            List classes such as <code>.list-unstyled</code>, <code>.spaced</code>, etc ...
                        </li>

                        <li>
                            And different classes or inline styles such as <code>font-size</code>,
                            <code>line-height</code>, <code>text-decoration</code> <code>list-style-type</code>, etc ...
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- /section:pages/email -->
</section>